<template>
    <a-card :title="props.title" class="m-table">
        <template #extra>
            <slot name="extra"></slot>
        </template>
        <a-table :columns="props.columns" :data="props.data.lists || []" row-key="id" :hover="props.hover"
            :stripe="props.stripe" :size="props.size" :table-layout-fixed="props.tableLayoutFixed"
            :pagination="props.pagination" :page-position="props.pagePosition" 
            :default-expand-all-rows="props.defaultExpandAllRows" :loading="props.loading"
            :expandable="props.expandable" >
            <template v-for="col in props.columns" :key="col.dataIndex" #[col.dataIndex]="scope">
                <slot :name="col.dataIndex" v-bind="scope"></slot>
            </template>
        </a-table>

    </a-card>
</template>

<script setup lang="ts">
import type { TableBorder, TableColumnData, TableData, PaginationProps, TableExpandable } from '@arco-design/web-vue'

interface Data {
    lists: TableData[]
    total: number
    current: number
    pageSize: number
}

interface Props {
    columns: TableColumnData[]          // 列
    data: Data                   // 数据
    bordered?: boolean | TableBorder     // 是否显示边框
    hover?: boolean                      // 是否显示悬停效果
    stripe?: boolean                     // 是否显示斑马线
    size?: 'default' | 'small' | 'middle' // 表格大小
    tableLayoutFixed?: boolean           // 表格是否固定
    pagination?: PaginationProps         // 分页
    pagePosition?: 'top' | 'bottom' | 'both' // 分页位置
    rowKey?: string                      // 行key
    title?: string                      // 标题

    defaultExpandAllRows?: boolean // 是否默认展开所有行
    loading?: boolean // 是否显示loading
    loadingText?: string // 加载文案
    expandable?: TableExpandable // 是否显示展开按钮
}

const props = withDefaults(defineProps<Props>(), {
    columns: () => [],          // 列
    data: () => ({
        lists: [],
        total: 0,
        current: 1,
        pageSize: 10
    }),             // 数据
    bordered: true,            // 是否显示边框
    hover: true,               // 是否显示悬停效果
    stripe: true,              // 是否显示斑马线
    size: 'default',            // 表格大小
    tableLayoutFixed: false,     // 表格是否固定
    pagination: {
        showTotal: true,            // 是否显示总条数
        showJumper: true,           // 是否显示跳转器
        showPageSize: true,         // 是否显示每页条数
        pageSizeOptions: [10, 20, 50, 100, 500], // 每页条数选项
        onChange: (current: number) => {
            console.log(current)
        }
    },           // 是否显示分页
    pagePosition: 'bottom', // 分页位置
    rowKey: 'id', // 行key
    title: '', // 标题
    defaultExpandAllRows: false, // 是否默认展开所有行
    loading: false, // 是否显示loading
    expandable: {
        defaultExpandAllRows: true
    }
})
</script>

<style scoped lang="scss">
// .m-table {
//     min-height: 500px;
// }
</style>
